<script setup>
defineProps({
  recommends: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['itemClick'])
function handleRecomendItemClick(item) {
  emit('itemClick', item)
}
</script>

<template>
  <view class="home-recommend">
    <template v-for="item in recommends" :key="item">
      <view class="recommend-item" @click="handleRecomendItemClick(item)">
        <image
          class="image"
          :src="item.image"
          mode="aspectFit|aspectFill|widthFix"
        ></image>
        <view class="title">{{ item.title }}</view>
      </view>
    </template>
  </view>
</template>

<style lang="scss" scoped>
.home-recommend {
  display: flex;
  justify-content: space-between;
  /* border: 1px solid red; */
}
.image {
  height: 150rpx;
  width: 150rpx;
}
.recommend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}
.title {
  margin-top: 5px;
  font-size: 28rpx;
}
</style>
